<template>
  <div class="mobile-project-page min-h-screen bg-gray-50">
    <!-- 页面容器 -->
    <div class="max-w-6xl mx-auto px-4 py-6">

      <!-- 标题区域 -->
        <div class="mb-8 ">
          <h1 class="">
          </h1>

          <el-page-header title="返回" @back="goBack">
            <template #content>
              <div class="flex items-center text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800 flex items-center" >
                <span class="text-large font-600 mr-3"> {{projectName}} </span>
                <span class="text-sm mr-2" style="color: var(--el-text-color-regular)">
              产品管理
          </span>
              </div>
            </template>
          </el-page-header>
        </div>
      <!-- 查询表单 -->
      <el-form
          label-position="top"
          :model="queryParams"
          @submit.prevent
          class="form-box bg-white rounded-xl shadow-sm p-6 mb-6 transition-all duration-300"
      >
        <!-- 响应式表单布局 -->
        <el-row :gutter="16">
          <!-- 产品名称 -->
          <el-col :xs="24" :sm="12" :md="6" :lg="5">
            <el-form-item
                label="产品名称"
                :label-style="{ fontSize: '14px', color: '#606266', marginBottom: '4px' }"
            >
              <el-input
                  v-model="queryParams.name"
                  placeholder="请输入产品名称"
                  clearable
                  class="w-full"
              />
            </el-form-item>
          </el-col>

          <!-- 客户 -->
          <el-col :xs="24" :sm="12" :md="6" :lg="5">
            <el-form-item
                label="产品类型"
                :label-style="{ fontSize: '14px', color: '#606266', marginBottom: '4px' }"
            >
              <el-input
                  v-model="queryParams.type"
                  placeholder="请输入产品类型"
                  clearable
                  class="w-full"
              />
            </el-form-item>
          </el-col>
          <!-- 客户 -->
          <el-col :xs="24" :sm="12" :md="6" :lg="5">
            <el-form-item
                label="当前工序"
                :label-style="{ fontSize: '14px', color: '#606266', marginBottom: '4px' }"
            >
              <el-input
                  v-model="queryParams.process"
                  placeholder="请输入产品工序"
                  clearable
                  class="w-full"
              />
            </el-form-item>
          </el-col>

          <!-- 查询按钮 -->
          <el-col :xs="24" :sm="12" :md="12" :lg="4" class="flex items-end">
            <el-form-item class="w-full mb-0">
              <el-button
                  type="primary"
                  @click="fetchData"
                  class="w-full h-11 bg-primary hover:bg-primary/90 active:bg-primary/95 transition-all duration-200"
                  :style="{ borderRadius: '6px', fontSize: '14px',marginTop:'28px' }"
              >
                <i class="el-icon-search mr-1.5"></i>查询
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>



      <!-- 表格卡片列表 -->
      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4" v-loading="loading">
        <el-card
            v-for="item in projectList"
            :key="item.id"
            class="table-card overflow-hidden rounded-xl border-0 shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 cursor-pointer"
            shadow="hover"
        >
          <template #header>
            <div class="card-header   flex justify-between items-start">
              <strong class="text-lg font-semibold text-gray-800 line-clamp-1">产品名称:{{ item.name }}</strong>
              <div v-if="item.ganttConfig">
                <el-button @click="handleDetail(item)" type="primary" plain>甘特图</el-button>
              </div>
            </div>
          </template>


          <div >
            <div class="card-line py-2 border-b border-gray-50 text-gray-600 flex items-center">
              <i class="el-icon-document-copy  text-gray-400 mr-2"></i>
              <span>项目类型：{{ item.type }}</span>
            </div>
            <div class="card-line py-2 border-b border-gray-50 text-gray-600 flex items-center">
              <i class="el-icon-user  text-gray-400 mr-2"></i>
              <span>投产数量：{{ item.amount }}</span>
            </div>
            <div class="card-line py-2 border-b border-gray-50 text-gray-600 flex items-center">
              <i class="el-icon-time  text-gray-400 mr-2"></i>
              <span>完成数量：{{ item.finishAmount }}</span>
            </div>
<!--            <div class="card-line py-2 border-b border-gray-50 text-gray-600 flex items-center">-->
<!--              <i class="el-icon-calendar-check  text-gray-400 mr-2"></i>-->
<!--              <span>当前工序：{{ item.process }}</span>-->
<!--            </div>-->
            <div class="card-line py-3 text-gray-600">
              <el-progress
                  :percentage="item.progress"
                  :stroke-width="6"
                  :color="getProgressColor(item.progress)"
                  class="h-2"
              />
            </div>
          </div>
        </el-card>
      </div>

      <!-- 空状态 -->
      <div v-if="projectList.length === 0&&!loading" class="text-center py-16 bg-white rounded-xl shadow-sm mt-6">
        <div class="el-empty">
          <div slot="image">
            <el-empty-image :src="ElEmpty.PLACEHOLDER_IMAGE" />
          </div>
          <div slot="description">暂无项目数据</div>
        </div>
      </div>

      <!-- 分页 -->
      <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="queryParams.pageNum"
          :page-size="queryParams.pageSize"
          class="pagination mt-8 flex justify-center"
          @current-change="handlePageChange"
          :pager-count="5"
      />
    </div>



    <el-dialog v-model="dialogVisible" fullscreen style="padding: 0">
      <div  class="container mx-auto p-4">
        <gantt_chart :tasks="projectTasks" />
      </div>
    </el-dialog>




    <el-backtop :right="100" :bottom="100" />

  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox, ElEmpty } from 'element-plus'
import axios from 'axios'
import {useRoute, useRouter} from "vue-router";
import Gantt_chart from "@/view/gantt_chart.vue";

const api = axios.create({
  baseURL: "http://project.lkkj.xyz",
  timeout: 5000,
})

const route = useRoute();
const router = useRouter();
const projectName=route.query.name
const loading =ref(false)
const projectList = ref([])
const projectTasks = ref( null)
const total = ref(0)
const dialogVisible = ref(false)
const queryParams = ref({
  projectId: route.query.id,
  pageNum: 1,
  pageSize: 10
})

const fetchData = async () => {
  console.log(queryParams.value)
  loading.value=true
  try {
    const response = await api.get('/product/list', {
      params: queryParams.value
    })
    const res = response.data
    console.log(res)
    if (res.code === 200) {
      projectList.value = res.data.list.map((item) => ({
        ...item,
        progress:
            item.amount && item.amount > 0
                ? Number(((item.finishAmount / item.amount) * 100).toFixed(1))
                : 0,
      }))
      total.value = res.data.total
    } else {
      ElMessage.error(res.message || '获取项目列表失败')
    }
    loading.value=false
  } catch (error) {
    loading.value=false
    ElMessage.error('请求失败')
  }
}

// 操作按钮逻辑
const handleDetail = (item) => {
  projectTasks.value=item.ganttConfig
  dialogVisible.value=true
}

const handlePageChange = (page) => {
  queryParams.value.pageNum = page
  fetchData()
}

// 获取进度条颜色
const getProgressColor = (progress) => {
  if (progress === 100) return '#52c41a';
  if (progress >= 70) return '#1890ff';
  if (progress >= 30) return '#faad14';
  return '#ff4d4f';
}
const goBack = () => {
  router.back()
}
onMounted(() => {
  fetchData()
})
</script>

<style scoped>
/* 基础样式 */
.mobile-project-page {
  background-color: #f9fafb;
  min-height: 100vh;
}

/* 卡片悬停效果优化 */
.table-card:hover .card-header strong {
  color: #1890ff;
  transition: color 0.3s;
}

/* 进度条样式优化 */
::v-deep .el-progress-bar__outer {
  background-color: #f0f2f5;
  height: 6px;
  border-radius: 3px;
}

::v-deep .el-progress-bar__inner {
  border-radius: 3px;
  transition: width 1s ease-in-out;
}

/* 分页样式优化 */
::v-deep .el-pagination.is-background .el-pager li {
  margin: 0 3px;
  border-radius: 4px;
}

::v-deep .el-pagination.is-background .el-pager li.active {
  background-color: #1890ff;
  color: #fff;
}

::v-deep .el-pagination.is-background .el-pager li:hover:not(.disabled) {
  color: #1890ff;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr !important;
  }

  .form-box {
    padding: 4px !important;
  }

  .card-line {
    font-size: 13px;
  }
}
/* 解决列间距和对齐问题 */
.form-item-col {
  display: flex;
  flex-direction: column;
}

/* 修复移动端布局 */
@media (max-width: 768px) {
  .form-box {
    padding: 16px !important;
  }

  .form-item-col:first-child {
    margin-bottom: 12px;
  }

  ::v-deep .el-form-item__content {
    margin-left: 0 !important;
  }
}

/* 修复桌面端对齐问题 */
@media (min-width: 768px) {
  .form-item-col {
    height: 100%;
  }

  ::v-deep .el-form-item {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  ::v-deep .el-form-item__content {
    flex: 1;
  }
}

</style>
